import '../ui/layui.all'
import '../ui/css/layui.css'
import '../ui/css/modules/code.css'
import '../ui/css/modules/layer/default/layer.css'
import '../ui/css/modules/laydate/default/laydate.css'
import './waterplay.css'
import waterimg from '../water/baseimg'
import { PolygonGeometry, PolygonHierarchy, Cartesian3,EllipsoidSurfaceAppearance, Primitive,GroundPrimitive, GeometryInstance,Material} from 'cesium';
const waterPlayer = function(views){
    this.views = views
    this.temp = '<div class="water-play-title"></div>'+
    '<div class="water-play-content">'+
        '<div class="play-group-btn">'+
            '<i class="layui-icon plat-btn layui-icon-play" data-method="playwater"></i>'+
            '<i class="layui-icon plat-btn layui-icon-pause" data-method="pausewater"></i>'+
            '<i class="layui-icon plat-btn layui-icon-release" data-method="gotowater"></i>'+
        '</div>'+
        '<div class="water-play-content-prograss">'+
            '<div class="layui-progress"  lay-showpercent="true" lay-filter="playprograss" >'+
                '<div class="layui-progress-bar" lay-percent="0%"></div>'+
            '</div>'+
       ' </div>'+
        '<div class="play-exit-btn">'+
           '<i class="layui-icon plat-btn layui-icon-close" data-method="closewater"></i> '+
        '</div>'+
    '</div>'
    this.contanner = this._drawWidget()
    this.mapping = {}
    this.PlayerInterval= window.setInterval(function () {

    })
    this.floods = null
    this.playInfo={
        prventity:null,
        state:0,   //播放状态 0 1 2
        currentIndex:0, //当前进度
        totalCount:0    //总数
    }
}
waterPlayer.prototype={
    openWidget:function(){
        this.contanner.style.display = true
    },
    closeWidget:function(){
        this.contanner.style.display = false
    },
    initData:function(floods){
        this.floods = floods
        this.playInfo.state = 0
        this.playInfo.currentIndex = 0
        this.playInfo.totalCount = floods.length
    },
    goto:function(){
        
    },
    play:function(){
        var self = this
        self.playInfo.currentIndex = 60
        this.PlayerInterval= window.setInterval(function () {
            // debugger
            var flood
            self._praograss()
            if (self.floods[self.playInfo.currentIndex]) {
                flood = self.floods[self.playInfo.currentIndex];
                self.playInfo.currentIndex++
            }
            else{
                return
            }
            var thisFrames = []
            for (var i = 0; i < flood.length; i++) {
                var River2 = self._createWaterLayer(flood[i])
                if(River2){
                    self.views.scene.primitives.add(River2);//添加到场景
                    thisFrames.push(River2)
                }
            }

            if (self.playInfo.prventity) {
                for (let j = 0; j < self.playInfo.prventity.length; j++) {
                    self.views.scene.primitives.remove(self.playInfo.prventity[j])
                }
            }
            self.playInfo.prventity = thisFrames
        },1000)
    },  
    stop:function(){
        window.clearInterval(this.PlayerInterval)
        this.playInfo.state = 0
    },  
    exit:function(){
       
    },
    _drawWidget:function(){
        var dom =  document.createElement("div");
        dom.className = "water-play";
        dom.id="waterPlayer"
        dom.innerHTML = this.temp;
        var body = document.getElementsByTagName("body")[0];
        body.appendChild(dom);
        this._bind()
        return dom
    },
    _bind:function(){
        var self = this
        //触发事件
        var active = {
            playwater:function(){
                self.play()
            },
            pausewater:function(){
                self.stop()
            },
            gotowater:function(){
                self.goto()
            },
            closewater:function(){
                self.exit()
            }
        }
        $('#waterPlayer .plat-btn').on('click', function(){
            var othis = $(this), method = othis.data('method');
            active[method] ? active[method].call(this, othis) : '';
        });
    },
    _getMaterial:function(size){
        var key = size + ""
        if (this.mapping[key])
            return this.mapping[key];

        var frequency=1
        if(size>0)
            frequency=10/Math.sqrt(size,1)
        
        var riverMaterial = new Material({
            fabric: {
                type: 'Water',
                uniforms: {
                    baseWaterColor: {
                        alpha: 1,
                        blue: 0.1,
                        green: 0.3,
                        red: 0.3,
                        // red: 0.55,
                        // green: 0.45,
                        // blue: 0.1,
                    },
                    normalMap: waterimg,
                    // normalMap:'./demo/img/water4.png',
                    frequency: 800,          // 100
                    animationSpeed: 0.01,  //0.015
                    amplitude: 8    //30
                }
            }
        });
        this.mapping[key]=riverMaterial;
        return riverMaterial
    },
    _createWaterLayer:function(flood){
        if(flood.cood && flood.h && flood.a){
            var floodpoints = flood.cood.map(function(item){
                return parseFloat(item)
            })
            var polygon2 = new PolygonGeometry({
                polygonHierarchy: new PolygonHierarchy(Cartesian3.fromDegreesArray(floodpoints)),
                extrudedHeight: 0,
                height: flood.h+5, //TODO
                vertexFormat: EllipsoidSurfaceAppearance.VERTEX_FORMAT
            });
            var River2 = new Primitive({
                geometryInstances: new GeometryInstance({
                    geometry: polygon2
                }),
                appearance: new EllipsoidSurfaceAppearance({
                    aboveGround: true
                }),
                show: true
            });
            River2.appearance.material = this._getMaterial(flood.a);
            return River2
        }else{
            return null
        }
       
    },
    _praograss:function(){
        var element = layui.element
        var pgnum = (this.playInfo.currentIndex/this.playInfo.totalCount).toFixed(1)*100
        element.progress('playprograss', pgnum+'%');
    }
}
export default waterPlayer